<script setup lang="ts">
import { onBeforeUnmount, onMounted, ref, watch } from "vue";
import { reqSkuInfo, reqDeleteSku, reqSpuList } from "@/api/product/spu";
import {
  SKUList,
  SKUResponseData,
  SpuData,
  SPUList,
  SpuResponseData,
} from "@/api/product/spu/type.ts";
import useCategoryStore from "@/store/modules/category.ts";
import SkuForm from "@/views/product/spu/skuForm.vue";
import SpuForm from "@/views/product/spu/spuForm.vue";
import { ElMessage } from "element-plus";

// 引入仓库
const categoryStore = useCategoryStore();

// 定义场景
let scene = ref<number>(0);
// 定义查询参数
let queryParams = ref({
  pageNum: 1, // 当前页码
  pageSize: 3, // 每页显示条数
  category3Id: categoryStore.c3Id || 61, // 三级分类id
});

// 表格
let tableData = ref<SPUList>([]);

// 定义总条数
let total = ref<number>(30);

// 弹窗
let dialogTableVisible = ref<boolean>(false);

// sku列表
let skuList = ref<SKUList>([]);

// 获取子组件spuForm
let spuFormRef = ref<any>();

// 获取子组件skuForm
let skuFormRef = ref<any>();

// 获取SPU列表
const getSPUList = async () => {
  let result: SpuResponseData = await reqSpuList(
    queryParams.value.pageNum,
    queryParams.value.pageSize,
    queryParams.value.category3Id,
  );
  if (result.code === 200) {
    tableData.value = result.data.records; // 更新表格数据
    total.value = result.data.total; // 更新总条数
  }
};

// size-change：每页条数改变时触发
const handleSizeChange = (val: number) => {
  queryParams.value.pageSize = val; // 更新每页显示条数
  getSPUList();
};

// current-change：当前页改变时触发
const handleCurrentChange = (val: number) => {
  queryParams.value.pageNum = val; // 更新当前页码
  getSPUList();
};

// 添加SPU
const addSpu = () => {
  // 切换场景 切换到添加spu的场景
  handleUpdateScene(1, false);
  // 新增spu的时候，除了三级分类id，其他的数据都是空的
  spuFormRef.value.initData({ category3Id: categoryStore.c3Id }); // 调用子组件的方法 初始化数据
};

// 编辑SPU
const updateSpu = (row: SpuData) => {
  // 切换场景 切换到添加spu的场景
  handleUpdateScene(1, false);
  // 调用子组件的方法  这种子组件的获取方式是搭配v-show使用的，而不是v-if
  // v-show 会保留子组件的状态，所以可以直接获取到子组件的方法
  // 如果是v-if的话，子组件会被销毁，所以无法获取到子组件的方法
  spuFormRef.value.initData(row); // 调用子组件的方法 初始化数据
};

// 更新场景
const handleUpdateScene = (val: number, addFlag: boolean) => {
  scene.value = val;
  //    如果切换的场景是列表场景，就重新获取列表数据
  if (val === 0) {
    if (addFlag) {
      queryParams.value.pageNum = 1;
    }
    getSPUList();
  }
};

// 新增sku
const addSku = (row: SpuData) => {
  // 切换场景 切换到添加sku的场景
  handleUpdateScene(2, false);
  // 调用子组件的方法 初始化数据
  skuFormRef.value.initData(categoryStore.c1Id, categoryStore.c2Id, row);
};

// 展示sku
const showSku = async (row: SpuData) => {
  // 发送请求获取sku列表
  let result: SKUResponseData = await reqSkuInfo(row.id);
  if (result.code === 200) {
    skuList.value = result.data; // 更新表格数据
    dialogTableVisible.value = true; // 打开对话框
  }
};

// 删除spu
const deleteSpu = async (row: SpuData) => {
  // 发送请求删除spu
  let result: SKUResponseData = await reqDeleteSku(row.id as number);
  if (result.code === 200) {
    // 删除成功，重新获取列表数据
    ElMessage.success("删除成功");
    getSPUList();
  } else {
    ElMessage.error("删除失败");
  }
};

// 监听仓库中的三级分类id变化，如果变化了，就重新获取平台属性列表
watch(
  () => categoryStore.c3Id,
  () => {
    // 更改查询参数中的三级分类id
    queryParams.value.category3Id = categoryStore.c3Id;
    // 重新获取平台属性列表
    getSPUList();
  },
);

// 挂载钩子函数
onMounted(() => {});

onBeforeUnmount(() => {
  // 清空store中的所有数据
  categoryStore.$reset();
});

// 定义组件名称
defineOptions({
  name: "Spu",
});
</script>

<template>
  <div>
    <!--  三级菜单  -->
    <el-card class="three-selections">
      <Category :scene="scene"></Category>
    </el-card>
    <!--  table -->
    <el-card v-if="scene == 0">
      <el-button
        icon="plus"
        @click="addSpu"
        type="primary"
        class="add-btn"
        :disabled="!queryParams.category3Id"
        >添加SPU</el-button
      >
      <el-table border :data="tableData">
        <el-table-column label="序号" type="index" width="80px" align="center">
        </el-table-column>
        <el-table-column
          label="SPU名称"
          prop="spuName"
          align="center"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column
          label="SPU描述"
          prop="description"
          align="center"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column label="操作" align="center">
          <!--          使用 title  可以增加提示效果 -->
          <template #default="{ row }">
            <el-button
              @click="addSku(row)"
              type="primary"
              size="small"
              icon="plus"
              title="添加"
            ></el-button>
            <el-button
              @click="updateSpu(row)"
              type="success"
              size="small"
              icon="edit"
              title="编辑"
            ></el-button>
            <el-button
              type="info"
              size="small"
              icon="setting"
              title="展示"
              @click="showSku(row)"
            ></el-button>
            <el-popconfirm
              title="确定删除吗？"
              confirmButtonText="确定"
              cancelButtonText="取消"
              icon="el-icon-question"
              @confirm="deleteSpu(row)"
            >
              <template #reference>
                <el-button
                  type="danger"
                  size="small"
                  icon="delete"
                  title="删除"
                ></el-button>
              </template>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>

      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="queryParams.pageNum"
        :page-sizes="[1, 3, 5, 10]"
        :page-size="queryParams.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        class="float-right page"
      ></el-pagination>
    </el-card>
    <!--  添加spu  -->
    <el-card v-show="scene == 1">
      <SpuForm ref="spuFormRef" @updateScene="handleUpdateScene"></SpuForm>
    </el-card>
    <!--  添加sku  -->
    <el-card v-show="scene == 2">
      <SkuForm ref="skuFormRef" @updateScene="handleUpdateScene"></SkuForm>
    </el-card>

    <!--  展示对话框的列表  -->
    <el-dialog v-model="dialogTableVisible" title="sku列表">
      <el-table :data="skuList">
        <el-table-column
          property="skuName"
          show-overflow-tooltip
          label="名字"
        />
        <el-table-column property="price" label="价格" />
        <el-table-column property="weight" label="重量" />
        <el-table-column property="skuDefaultImg" label="图片">
          <template #default="{ row }">
            <img :src="row.skuDefaultImg" alt="" width="100" height="100" />
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>
  </div>
</template>

<style scoped lang="scss">
.three-selections {
  margin: 20px 0;
}

.add-btn {
  margin-bottom: 10px;
}

.float-right {
  float: right;
}

.page {
  margin: 20px 0;
}
</style>
